<template>
    <el-card style="height: 75px;">
        <el-form :inline="true" class="form">
            <el-form-item label="用户名：">
                <el-input placeholder="请你输入用户名" v-model="keyword"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="default" :disabled="keyword?false:true" @click="search">搜索</el-button>
                <el-button type="primary" size="default" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>
    </el-card>
    <el-card style="margin: 10px 0px;">
        <el-button type="primary" size="default" @click="addUser" v-has="`btn.User.add`">添加用户</el-button>
        <el-button type="primary" size="default" :disabled="selectIdArr.length?false:true" @click="deleteSelectUser" v-has="`btn.User.remove`">批量删除</el-button>
        <!-- 表格展示用户信息 -->
        <el-table style="margin: 10px 0px;" border :data="userArr" @selection-change="selectChange">
            <el-table-column type="selection" align="center"></el-table-column>
            <el-table-column label="#" align="center" type="index"></el-table-column>
            <el-table-column label="ID" align="center" prop="id"></el-table-column>
            <el-table-column label="用户名字" align="center" prop="username" show-overflow-tooltip></el-table-column>
            <el-table-column label="用户名称" align="center" prop="name" show-overflow-tooltip></el-table-column>
            <el-table-column label="用户角色" align="center" prop="roleName" show-overflow-tooltip></el-table-column>
            <el-table-column label="创建时间" align="center" prop="createTime" show-overflow-tooltip></el-table-column>
            <el-table-column label="更新时间" align="center" prop="updateTime" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="300px" align="center">
                <template #="{row,$index}">
                    <el-button type="primary" size="small" icon="User" @click="setRole(row)" v-has="`btn.User.assgin`">分配角色</el-button>
                    <el-button type="primary" size="small" icon="Edit" @click="updateUser(row)" v-has="`btn.User.update`">编辑</el-button>
                    <el-popconfirm :title="`你确定要删除${row.username}?`" width="260px" @confirm="deleteUser(row.id)">
                        <template #reference>
                            <el-button type="primary" size="small" icon="Delete" v-has="`btn.User.remove`">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页器 -->
        <el-pagination
            v-model:current-page="pageNo"
            v-model:page-size="pageSize"
            :page-sizes="[3, 5, 7, 9]"
            :background="true"
            layout=" prev, pager, next, jumper,->, sizes,total"
            :total="total"
            @current-change="getHasUser"
            @size-change="handler"
            />
    </el-card>
    <!-- 抽屉结构：完成添加和更新用户操作 -->
    <el-drawer v-model="drawer" >
        <!-- 头部标题，是动态的 -->
        <template #header>
            <h4>{{ userParams.id?'更新用户':'添加用户' }}</h4>
        </template>
        <!-- 抽屉的身体 -->
        <template #default>
            <el-form :model="userParams" :rules="rules" ref="formRef">
                <el-form-item label="用户姓名" prop="username">
                    <el-input placeholder="请你输入用户名字" v-model="userParams.username"></el-input>
                </el-form-item>
                <el-form-item label="用户昵称" prop="name">
                    <el-input placeholder="请你输入用户昵称" v-model="userParams.name"></el-input>
                </el-form-item>
                <el-form-item label="用户密码" prop="password" v-if="!userParams.id">
                    <el-input placeholder="请你输入用户密码" v-model="userParams.password"></el-input>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="save">确定</el-button>
            </div>
        </template>
    </el-drawer>
    <!-- 抽屉结构：已有的账号进行职位的分配 -->
    <el-drawer v-model="drawer1">
        <template #header>
            <h4>分配角色用户</h4>
        </template>
        <template #default>
            <el-form>
                <el-form-item label="用户姓名">
                    <el-input v-model="userParams.username" :disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="职位列表">
                    <el-checkbox v-model="checkAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全选</el-checkbox>
                    <!-- 显示职位的复选框 -->
                    <el-checkbox-group v-model="userRole" @change="handleCheckedRolesChange">
                        <el-checkbox v-for="(role,index) in allRole" :key="index" :label="role">
                            {{role.roleName}}
                        </el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
            </el-form>
        </template>
        <template #footer>
            <div style="flex: auto">
                <el-button @click="drawer1=false">取消</el-button>
                <el-button type="primary" @click="confirmClick">确定</el-button>
            </div>
        </template>
    </el-drawer>
</template>

<script lang="ts" setup name="User">
    import {ref,onMounted,reactive,nextTick} from 'vue'
    import {reqSelectUser,reqRemoveUser,reqSetUserRole,reqAllRole,reqAddOrUpdateUser,reqUserInfo} from '@/api/acl/user/index'
    import type {SetRoleData,AllRole,AllRoleResponseData,UserResponseData,Records,User} from '@/api/acl/user/type'
    import { ElMessage } from 'element-plus';
    import useLayOutSettingStore from '@/store/modules/setting'

    // 当前页码
    let pageNo=ref<number>(1)
    // 一页展示几条数据
    let pageSize=ref<number>(3)
    // 用户总数
    let total=ref<number>(0)
    // 存储全部用户的数组
    let userArr=ref<Records>([])
    // 控制抽屉的显示与隐藏
    let drawer=ref<boolean>(false)
    // 用户信息
    let userParams=reactive<User>({
        username:'',
        name:'',
        password:''
    })
    // 表单校验的规则对象
    let rules={
        // 用户名字
        username:[{required:true,trigger:'blur',validator:validatorUsername}],
        // 用户昵称
        name:[{required:true,trigger:'blur',validator:validatorName}],
        // 密码
        password:[{required:true,trigger:'blur',validator:validatorPassword}]
    }
    // 获取form组件实例
    let formRef=ref()
    // 控制分配角色的抽屉显示与隐藏
    let drawer1=ref<boolean>(false)
    // 是否全选
    let checkAll=ref<boolean>(false)
    // 设置不确定的样式
    let isIndeterminate=ref<boolean>(true)
    // 所有职位
    let allRole=ref<AllRole>([])
    // 用户已有的职位
    let userRole=ref<AllRole>([])
    // 准备一个数组存储批量删除的用户Id
    let selectIdArr=ref<User[]>([])
    // 收集用户输入的关键字
    let keyword=ref<string>('')
    // 获取模版setting仓库对象
    let settingStore=useLayOutSettingStore()

    // 组件挂载完毕获取数据
    onMounted(()=>{
        getHasUser()
    })

    // 获取全部的已有用户信息
    async function getHasUser(pager=1){
        // 收集当前页码
        pageNo.value=pager
        let result:UserResponseData=await reqUserInfo(pageNo.value,pageSize.value,keyword.value)
        if(result.code==200){
            total.value=result.data.total
            userArr.value=result.data.records
        }
    }

    // 下拉菜单发生变化的回调
    function handler(){
        getHasUser()
    }

    // 添加用户按钮的回调
    function addUser(){
        // 抽屉显示
        drawer.value=true
        // 清空数据
        Object.assign(userParams,{
            username:'',
            name:'',
            password:'',
            id:''
        })
        // 清除上一次错误的提示信息
        nextTick(()=>{
            formRef.value.clearValidate('username')
            formRef.value.clearValidate('name')
            formRef.value.clearValidate('password')
        })
    }

    // 更新已有的按钮的回调 row即为已有的用户账号信息
    function updateUser(row:User){
        // 抽屉显示
        drawer.value=true
        // 存储已有的账号信息
        Object.assign(userParams,row)
        // 清除上一次错误的提示信息
        nextTick(()=>{
            formRef.value.clearValidate('username')
            formRef.value.clearValidate('name')
        })
    }

    // 保存按钮事件的回调
    async function save(){
        // 点击按钮，必须保证表单验证全部通过
        await formRef.value.validate()
        // 添加或者更新用户信息
        let result:any=await reqAddOrUpdateUser(userParams)
        if(result.code==200){
            // 关闭抽屉
            drawer.value=false
            // 提示信息
            ElMessage({
                type:'success',
                message:userParams.id?'更新成功':'添加成功'
            })
            // 获取全部账号信息
            // getHasUser(userParams.id?pageNo.value:1)
            // 浏览器自动刷新一次(一直回到第一页，上一句语句可不写)
            window.location.reload()
        }else{
            // 关闭抽屉
            drawer.value=false
            // 提示信息
            ElMessage({
                type:'error',
                message:userParams.id?'更新失败':'添加失败'
            })
        }
    }

    // 取消按钮的回调
    function cancel(){
        // 关闭抽屉
        drawer.value=false
    }

    // 校验用户名字的回调函数
    function validatorUsername(rule:any,value:any,callback:any){
        // 用户名称至少是五位
        if(value.trim().length>=5){
            callback()
        }else{
            callback(new Error('用户名字至少五位'))
        }
    }

    // 校验用户昵称的回调函数
    function validatorName(rule:any,value:any,callback:any){
        // 用户名称至少是五位
        if(value.trim().length>=5){
            callback()
        }else{
            callback(new Error('用户昵称至少五位'))
        }
    }

    // 校验用户密码的回调函数
    function validatorPassword(rule:any,value:any,callback:any){
        // 用户名称至少是五位
        if(value.trim().length>=6){
            callback()
        }else{
            callback(new Error('用户密码至少六位'))
        }
    }

    // 分配角色按钮的回调
    async function setRole(row:User){
        // 存储已有的用户信息
        Object.assign(userParams,row)
        // 发请求获取全部职位数据与当前用户已有的职位的数据
        let result:AllRoleResponseData=await reqAllRole((row.id as number))
        if(result.code==200){
            // 存储全部的职位
            allRole.value=result.data.allRolesList
            // 存储当前用户已有的职位
            userRole.value=result.data.assignRoles
            // 抽屉显示
            drawer1.value=true
        }
    }

    // 全选复选框的change回调 
    function handleCheckAllChange(val:boolean){
        // val：true(全选) false(全不选)
        userRole.value=val?allRole.value:[]
        // 不确定的样式
        isIndeterminate.value=false
    }

    // 底部复选框的change事件
    function handleCheckedRolesChange(val:string[]){
        // 已经勾选的这些项的长度
        const checkCount=val.length
        // 设置全选状态
        checkAll.value = checkCount === allRole.value.length
        // 顶部的复选框不确定的样式
        isIndeterminate.value=!(allRole.value.length==checkCount)
    }

    // 分配职位确定按钮的回调
    async function confirmClick(){
        // 收集参数
        let data:SetRoleData={
            userId:(userParams.id as number),
            roleIdList:userRole.value.map(item=>{
                return (item.id as number)
            })
        }
        // 分配用户职位
        let result:any=await reqSetUserRole(data)
        if(result.code==200){
            // 提示信息
            ElMessage({
                type:'success',
                message:'分配职务成功'
            })
            // 关闭抽屉
            drawer1.value=false
            // 获取用户信息,更新完毕留在当前页
            getHasUser(pageNo.value)
        }
    }

    // 删除某一个用户
    async function deleteUser(userId:number){
        let result:any=await reqRemoveUser(userId)
        if(result.code==200){
            ElMessage({
                type:'success',
                message:'删除成功'
            })
            getHasUser(userArr.value.length>1?pageNo.value:pageNo.value-1)
        }
    }

    // table勾选框勾选的事件
    function selectChange(val:any){
        selectIdArr.value=val
    }

    // 批量删除按钮的回调
    async function deleteSelectUser(){
        // 整理批量删除的参数
        let idList:any=selectIdArr.value.map(item=>{
            return item.id
        })
        // 批量删除的请求
        let result:any=await reqSelectUser(idList)
        if(result.code==200){
            ElMessage({
                type:'success',
                message:'删除成功'
            })
            getHasUser(userArr.value.length>idList.length?pageNo.value:pageNo.value-1)
        }
    }

    // 搜索按钮的回调
    function search(){
        // 根据关键字获取相应的用户数据
        getHasUser()
        // 清空关键字
        keyword.value=''
    }

    // 重置按钮的回调
    function reset(){
        settingStore.refresh=!settingStore.refresh
    }
</script>

<style scoped>
    .form{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
</style>